<template>
  <div class="container" style="height: 100%">
    <el-form class="query-form" :inline="true" :model="formQuery">
      <el-col :span="3">
        <el-form-item>
          <el-select
            clearable
            v-model="formQuery.fkBuildingId"
            @change="changeBuilding"
            placeholder="所属楼宇"
          >
            <el-option
              v-for="item in building"
              :label="item.buildingName"
              :value="item.pkBuildingId"
              :key="item.pkBuildingId"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item>
          <el-select
            clearable
            @change="areaChange"
            :disabled="selectBuilding"
            v-model="formQuery.areaNumberId"
            placeholder="所属区域"
          >
            <el-option
              v-for="item in area"
              :key="item.pkBasicdataId"
              :value="item.pkBasicdataId"
              :label="item.itemName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item>
          <el-select clearable v-model="formQuery.fkRoomTypeId" placeholder="房间户型">
            <el-option
              v-for="item in roomType"
              :key="item.pkBasicdataId"
              :value="item.pkBasicdataId"
              :label="item.itemName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item>
          <el-input clearable v-model="formQuery.unitCoding" placeholder="单元编码"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="3">
        <el-form-item>
          <el-select clearable v-model="formQuery.roomStatus" placeholder="房间状态">
            <el-option
              v-for="item in roomStateArray"
              :key="item.pkBasicdataId"
              :value="item.pkBasicdataId"
              :label="item.itemName"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item>
          <el-input clearable v-model="formQuery.inputString" placeholder="请输入关键字"></el-input>
        </el-form-item>
      </el-col>
      <el-form-item>
        <el-button @click="query">查询</el-button>
      </el-form-item>
      <el-form-item style="position:absolute;right:0.2rem;">
        <el-button type="primary" @click="$router.push('./edit')">新增</el-button>
        <el-button type="info" @click="isShowDelete = !isShowDelete">删除</el-button>
      </el-form-item>
    </el-form>
    <div class="div-table" style="padding:0 20px">
        <el-scrollbar style="height:100%;">
            <el-table
                ref="multipleTable"
                class="roomTable"
                :data="room"
                :row-class-name="tableRowClassName"
                style="width: 100%"
            >
                <template v-if="isShowDelete">
                <el-table-column :selectable="selMethod" type="selection"></el-table-column>
                </template>
                <el-table-column type="index" label="序号" width="70"></el-table-column>
                <el-table-column show-overflow-tooltip prop="roomName" label="房间名称"></el-table-column>
                <el-table-column prop="houseNumber" label="房间号"></el-table-column>
                <el-table-column prop="fkFloorId" label="所在楼层">
                <template slot-scope="{row}">{{row.fkFloorId +'楼'}}</template>
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="buildingName" label="所在楼宇"></el-table-column>
                <el-table-column prop="addr" label="所在区域"></el-table-column>
                <el-table-column prop="roomPurpose" label="房间用途"></el-table-column>
                <el-table-column prop="status" label="房间状态"></el-table-column>
                <el-table-column prop="rentalStatus" label="招租状态">
                <template slot-scope="{row}">{{row.rentalStatus===0?'未招租':'招租中' }}</template>
                </el-table-column>
                <el-table-column show-overflow-tooltip prop="tenantName" label="承租人"></el-table-column>
                <el-table-column show-overflow-tooltip prop="contractNumber" label="合同编号"></el-table-column>
                <el-table-column label="操作" fixed="right" width="225">
                <template slot-scope="{row}">
                    <!-- 判断是否空置中 -->
                    <template>
                    <!-- <template v-if="row.fkRoomStatusId==='ca68415c-1df1-11eb-9143-00ffb95445a5'"> -->
                    <el-link type="primary" :underline="false" @click="toEdit(row.pkRoomId)">| 编辑</el-link>
                    </template>
                    <el-link
                    type="primary"
                    :underline="false"
                    @click="roomEditWindow=true;roomId=row.pkRoomId;roomState=1;"
                    >| {{row.rentalStatus===0?'房源招租':'联系人变更' }}</el-link>
                    <el-link
                    type="primary"
                    v-if="row.rentalStatus===1"
                    :underline="false"
                    @click="lower(row.pkRoomId)"
                    >| 房源下线</el-link>
                    <el-link
                    type="primary"
                    :underline="false"
                    @click="roomEditWindow=true;roomId=row.pkRoomId;roomState=0"
                    >| 详情</el-link>
                    <el-link
                    type="primary"
                    @click="$router.push('/coefficient/edit/0/'+row.fkCoefficientTemplateId+'?roomId='+row.pkRoomId)"
                    :underline="false"
                    >| 系数模板</el-link>
                    <el-link
                    type="primary"
                    @click="$router.push('/taxRate/list?roomId='+row.pkRoomId)"
                    :underline="false"
                    >| 税率模板</el-link>
                    <el-link type="primary" :underline="false"
                    @click="deviceChangeModel.roomId=row.pkRoomId; dialogDeviceChangeVisible = true; " >| 换表 </el-link>
                </template>
                </el-table-column>
            </el-table>
        </el-scrollbar>
    </div>
    <div class="page-div">
      <el-pagination
        layout="prev, pager, next,jumper,sizes"
        :current-page="pageObj.page"
        :page-size="pageObj.pageSize"
        :total="pageObj.total"
        @current-change="currentPageChange"
        @size-change="sizeChange"
        :page-sizes="pageObj.pageSizes"
      ></el-pagination>
      <div v-if="isShowDelete" style="position: fixed;right: 10px;bottom:10px;">
        <el-button type="danger" @click="deleteSelected">确认删除</el-button>
        <el-button @click="isShowDelete=false">取消删除</el-button>
      </div>
    </div>
    <!-- 出租 -->
    <el-dialog
      :show-close="false"
      class="room-dialog"
      :destroy-on-close="true"
      :visible.sync="roomEditWindow"
    >
      <edit-view
        @reLoad="loadData"
        :window="true"
        :roomState="roomState"
        :roomId="roomId"
        v-if="roomEditWindow"
      ></edit-view>
    </el-dialog>
    <!--换表  -->
    <el-dialog
      class="dialog"
      :show-close="false"
      width="80%"
      title="换表"
      :destroy-on-close="true"
      :visible.sync = "dialogDeviceChangeVisible"
    >
      <el-form
        style="margin-left: 10%; width: 80%"
        ref="deviceChangeForm"
        :model="deviceChangeModel"
        label-width="80px"
      >
        <el-row style="width: 80%;">
          <el-col :span="4" >
            <el-form-item label-width="0" v-model="waterChecked">
              <el-checkbox  @change="waterChecked = !waterChecked">冷水表</el-checkbox>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="老表读数"  prop="oldWaterReading" ref="oldWaterReading" :rules="[
              {required: waterChecked,message:'请输入老表水行度',trigger: 'blur'},
              {validator: (rule,value,callback) => {
                if (!(/((^[0-9]\d*)|^0)(\.\d{0,2}){0,1}$/).test(value))
                  callback('不能是非正整数，或小数位超过两位');
                else if (value<this.bdLatestWaterReadingInDCTable)
                  callback('老水表行度不可小于上次换表时行度');
                else 
                  callback();
    
              },trigger:'blur'}
            ]">
              <el-input  :disabled="!waterChecked" v-model="deviceChangeModel.oldWaterReading">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="新表读数"  prop="newWaterReading" ref="newWaterReading" :rules="[
              { required: waterChecked, message: '请输入新表水行度', trigger: 'blur'},
              {validator:this.$rules.PriceNumber,trigger:'blur'}
                ]">
              <el-input  :disabled="!waterChecked" v-model="deviceChangeModel.newWaterReading">
              </el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row style="width: 80%;">
          <el-col :span="4">
            <el-form-item label-width="0" v-model="hotWaterChecked">
              <el-checkbox  @change="hotWaterChecked = !hotWaterChecked">热水表</el-checkbox>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="老表读数"  prop="oldHotWaterReading" ref="oldHotWaterReading" :rules="[
              { required: hotWaterChecked, message: '请输入老表热水行度', trigger: 'blur'},
              {validator: (rule,value,callback) => {
                if (!(/((^[0-9]\d*)|^0)(\.\d{0,2}){0,1}$/).test(value))
                  callback('不能是非正整数，或小数位超过两位');
                else if (value<this.bdLatestHotWaterReadingInDCTable)
                  callback('老热水表行度不可小于上次换表时行度');
                else 
                  callback();
    
              },trigger:'blur'}
            ]">
              <el-input  :disabled="!hotWaterChecked" v-model="deviceChangeModel.oldHotWaterReading">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="新表读数"  prop="newHotWaterReading" ref="newHotWaterReading" :rules="[
              { required: hotWaterChecked, message: '请输入新表热水行度', trigger: 'blur'},
              {validator:this.$rules.PriceNumber,trigger:'blur'}
                ]">
              <el-input  :disabled="!hotWaterChecked" v-model="deviceChangeModel.newHotWaterReading">
              </el-input>
            </el-form-item>
          </el-col>

        </el-row>
        <el-row style="width: 80%;">
          <el-col :span="4">
            <el-form-item label-width="0" v-model="electricChecked">
              <el-checkbox  @change="electricChecked = !electricChecked">电表</el-checkbox>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="老表读数"  prop="oldElectricReading" ref="oldElectricReading" :rules="[
              { required: electricChecked, message: '请输入电表行度', trigger: 'blur'},
              {validator: (rule,value,callback) => {
                if (!(/((^[0-9]\d*)|^0)(\.\d{0,2}){0,1}$/).test(value))
                  callback('不能是非正整数，或小数位超过两位');
                else if (value<this.bdLatestElectricReadingInDCTable)
                  callback('老电表行度不可小于上次换表时行度');
                else 
                  callback();
    
              },trigger:'blur'}
            ]">
              <el-input  :disabled="!electricChecked" v-model="deviceChangeModel.oldElectricReading">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="新表读数"  prop="newElectricReading" ref="newElectricReading" :rules="[
              { required: electricChecked, message: '请输入新表行度', trigger: 'blur'},
              {validator:this.$rules.PriceNumber,trigger:'blur'}
                ]">
              <el-input  :disabled="!electricChecked" v-model="deviceChangeModel.newElectricReading">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row style="width: 80%;">
          <el-col :span="4">
            <el-form-item label-width="0" v-model="gasChecked">
              <el-checkbox  @change="gasChecked = !gasChecked">燃气表</el-checkbox>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="老表读数"  prop="oldGasReading" ref="oldGasReading" :rules="[
              { required: gasChecked, message: '请输入老表行度', trigger: 'blur'},
              {validator: (rule,value,callback) => {
                if (!(/((^[0-9]\d*)|^0)(\.\d{0,2}){0,1}$/).test(value))
                  callback('不能是非正整数，或小数位超过两位');
                else if (value<this.bdLatestGasReadingInDCTable)
                  callback('老气表行度不可小于上次换表时行度');
                else 
                  callback();
    
              },trigger:'blur'}
            ]">
              <el-input  :disabled="!gasChecked" v-model="deviceChangeModel.oldGasReading">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="10">
            <el-form-item label="新表读数" prop="newGasReading" ref="newGasReading" :rules="[
              { required: gasChecked, message: '请输入新表行度', trigger: 'blur'},
              {validator:this.$rules.PriceNumber,trigger:'blur'}
                ]">
              <el-input  :disabled="!gasChecked" v-model="deviceChangeModel.newGasReading">
              </el-input>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row :span="24" style="text-align: center;">
          <el-button type="primary" style="margin-right: 20px;" @click="deviceChangeSubmit">
            添加
          </el-button>
          <el-button @click="resetDCForm(); dialogDeviceChangeVisible = false">退出</el-button>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import editView from "@/view/house/room/edit.vue";
import { Loading } from "element-ui";
import { updateRoom } from "@/api/house/room/room.js";
import { selectNameToId, getOneAll } from "@/api/common/common.js";
import {
  getBuildingName,
  getAllByAreaNumberId,
} from "@/api/house/building/building.js";
import { getAllByCoefficient } from "@/api/operations/coefficient/coefficient.js";
import {
  getRooms,
  getRoomById,
  updateByRent,
  queryRoomManagement,
  deleteRoom,
  addDeviceChange,
  getDeviceChangesByRoomId_CurrentMonth,
} from "@/api/house/room/room.js";
import { listMixin } from "@/mixin";
export default {
  mixins: [listMixin],
  components: {
    editView: editView,
  },
  data() {
    return {
      data: {},
      roomId: 0,
      roomState: 0,
      isShowDelete: false,
      formQuery: {},
      building: [],
      room: [],
      area: [],
      roomType: [],
      roomStateArray: [],
      coefficient: [],
      dialogDeviceChangeVisible:false,
      waterChecked:false,
      hotWaterChecked:false,
      electricChecked: false,
      gasChecked:false,
      deviceChangeModel:{
        roomId:"",
        oldWaterReading:"",
        newWaterReading:"",
        oldHotWaterReading:"",
        newHotWaterReading:"",
        oldElectricReading:"",
        newElectricReading:"",
        oldGasReading:"",
        newGasReading:""
      },
      deviceChangesInSelectedRoom:[],
      bdLatestWaterReadingInDCTable:null,
      bdLatestHotWaterReadingInDCTable:null,
      bdLatestElectricReadingInDCTable:null,
      bdLatestGasReadingInDCTable:null,
    }
  },
  watch: {
    newCoefficientTemplateId: function () {
      this.coeffChange();
    },
    waterChecked(newVal,oldVal) {
      if (!newVal)
        this.$refs['oldWaterReading'].resetField();
        this.$refs['newWaterReading'].resetField();
    },
    hotWaterChecked(newVal,oldVal) {
      if (!newVal)
        this.$refs['oldHotWaterReading'].resetField();
        this.$refs['newHotWaterReading'].resetField();
    },
    electricChecked(newVal,oldVal) {
      if (!newVal)
        this.$refs['oldElectricReading'].resetField();
        this.$refs['newElectricReading'].resetField();
    },
    gasChecked(newVal,oldVal) {
      if (!newVal)
        this.$refs['oldGasReading'].resetField();
        this.$refs['newGasReading'].resetField();
    },
    dialogDeviceChangeVisible(newVal,oldVal) {
      if (newVal)
        getDeviceChangesByRoomId_CurrentMonth(this.deviceChangeModel.roomId,"false").then( res => {
          this.DeviceChangesInSelectedRoom = res.data;
          let iLen = this.DeviceChangesInSelectedRoom.length;
          let newWaterReadingInDCTable="",newHotWaterReadingInDCTable="",newElectricReadingInDCTable="",newGasReadingInDCTable="";

          if (iLen > 0) {
            this.bdLatestWaterReadingInDCTable=null,
            this.bdLatestHotWaterReadingInDCTable=null,
            this.bdLatestElectricReadingInDCTable=null,
            this.bdLatestGasReadingInDCTable=null;           

            for (let i = 0;i < iLen;i++) {
              newWaterReadingInDCTable = this.DeviceChangesInSelectedRoom[i].newWaterReading;
              if (newWaterReadingInDCTable != null && this.bdLatestWaterReadingInDCTable == null)
                this.bdLatestWaterReadingInDCTable = newWaterReadingInDCTable;

              newHotWaterReadingInDCTable = this.DeviceChangesInSelectedRoom[i].newHotWaterReading;
              if (newHotWaterReadingInDCTable != null && this.bdLatestHotWaterReadingInDCTable == null)
                this.bdLatestHotWaterReadingInDCTable = this.DeviceChangesInSelectedRoom[i].newHotWaterReading;

              newElectricReadingInDCTable = this.DeviceChangesInSelectedRoom[i].newElectricReading;
              if (newElectricReadingInDCTable != null && this.bdLatestElectricReadingInDCTable == null)
                this.bdLatestElectricReadingInDCTable = this.DeviceChangesInSelectedRoom[i].newElectricReading;

              newGasReadingInDCTable = this.DeviceChangesInSelectedRoom[i].newGasReading;
              if (newGasReadingInDCTable != null && this.bdLatestGasReadingInDCTable == null)
                this.bdLatestGasReadingInDCTable = this.DeviceChangesInSelectedRoom[i].newGasReading;
            }
          }
          console.log('roomid='+this.deviceChangeModel.roomId);
          console.log('res.data='+res.data);
          console.log('latest water reading='+this.bdLatestWaterReadingInDCTable);
          console.log('latest hotwater reading='+this.bdLatestHotWaterReadingInDCTable);
          console.log('latest electric reading='+this.bdLatestElectricReadingInDCTable);
           console.log('latest gas reading='+this.bdLatestGasReadingInDCTable);
       })
    }
  },
  computed: {
    selectBuilding() {
      return Boolean(this.formQuery.fkBuildingId);
    },
    roomEditWindow: {
      get: function () {
        return this.$store.state.Windows.roomEditWindow;
      },
      set: function (newVal) {
        this.$store.commit("changeWindow", {
          name: "roomEditWindow",
          val: newVal,
        });
      },
    },
  },
  methods: {

    areaChange(areaId) {
      if (areaId) {
        getAllByAreaNumberId(areaId).then((res) => {
          this.building = res.data;
        });
      } else {
        this.building = this.getBuilding();
      }
    },
    lower(id) {
      let load = Loading.service({
        target: ".container",
        text: "努力加载中..",
      });
      getRoomById(id)
        .then((result) => {
          let data = result.data;
          data.rentalStatus = "0";
          updateByRent(data)
            .then((res) => {
              if (res.code === 10000) {
                this.$message.success(res.msg);
                this.loadDataProxy();
              }
            })
            .finally(() => {
              load.close();
            });
        })
        .catch(() => {
          load.close();
        });
    },
    submitForm() {
      let obj = {};
      obj.pkRoomId = this.roomId;
      obj.fkCoefficientTemplateId = this.newCoefficientTemplateId;
      updateRoom(obj)
        .then((res) => {
          if (res.code === 10000) {
            this.$message.success(res.msg);
          }
        })
        .finally(() => {
          this.close();
        });
    },
    deviceChangeSubmit() {
      let bWaterValid = true;
      let bHotWaterValid = true;
      let bElectricValid = true;
      let bGasValid = true;

      if (!this.waterChecked && !this.hotWaterChecked && !this.electricChecked && !this.gasChecked)
        return;

      if (this.waterChecked)
        this.$refs["deviceChangeForm"].validateField(["oldWaterReading","newWaterReading"],(errMsg) => {
          if (errMsg)
            bWaterValid = false;
        });

      if (this.hotWaterChecked)
        this.$refs["deviceChangeForm"].validateField(["oldHotWaterReading","newHotWaterReading"],(errMsg) => {
          if (errMsg)
            bHotWaterValid = false;
        });

      if (this.electricChecked)
        this.$refs["deviceChangeForm"].validateField(["oldElectricReading","newElectricReading"],(errMsg) => {
          if (errMsg)
            bElectricValid = false;
        });

      if (this.gasChecked)
        this.$refs["deviceChangeForm"].validateField(["olGasReading","newGasReading"],(errMsg) => {
          if (errMsg)
            bGasValid = false;
        });

      if (!bWaterValid || !bHotWaterValid || !bElectricValid || !bGasValid)
        return;


      let objDeviceChange = {};
      objDeviceChange.fkYundingRoomId = this.deviceChangeModel.roomId;
      if (this.waterChecked) {
        objDeviceChange.oldWaterReading = this.deviceChangeModel.oldWaterReading;
        objDeviceChange.newWaterReading = this.deviceChangeModel.newWaterReading;
      }

      if (this.hotWaterChecked){
        objDeviceChange.oldHotWaterReading = this.deviceChangeModel.oldHotWaterReading;
        objDeviceChange.newHotWaterReading = this.deviceChangeModel.newHotWaterReading;
      }

      if (this.electricChecked) {
        objDeviceChange.oldElectricReading = this.deviceChangeModel.oldElectricReading;
        objDeviceChange.newElectricReading = this.deviceChangeModel.newElectricReading;
      }

      if (this.gasChecked) {
        objDeviceChange.oldGasReading = this.deviceChangeModel.oldGasReading;
        objDeviceChange.newGasReading = this.deviceChangeModel.newGasReading;
      }


      addDeviceChange(objDeviceChange)
        .then((res) => {
          if (res.code === 10000) {
            this.$message.success(res.msg)
            this.dialogDeviceChangeVisible = false;
          }
        })
        .finally( () => {
          // this.close;
          this.resetDCForm();
        });
    },
    coeffChange() {
      getCostTemplateById(this.newCoefficientTemplateId, 0).then((res) => {
        if (res.code === 10000) {
          this.data = res.data;
        }
      });
    },
    selMethod(row, i) {
      //空置ID
      return row.fkRoomStatusId === "ca68415c-1df1-11eb-9143-00ffb95445a5";
    },
    loadData() {
      if (this.where) {
        return queryRoomManagement(this.where).then((result) => {
          let { data, total } = result;
          this.room = data;
          this.pageObj.total = total;
        });
      } else {
        return getRooms(this.pageObj).then((result) => {
          let { data, total } = result;
          this.room = data;
          this.pageObj.total = total;
        });
      }
    },
    getBuilding() {
      getBuildingName().then((res) => {
        this.building = res.data;
      });
    },
    changeBuilding() {
      let buildingObj = this.building.filter((v) => {
        return v.pkBuildingId === this.formQuery.fkBuildingId;
      });
      if (buildingObj.length > 0) {
        this.formQuery.areaNumberId = buildingObj[0].areaNumberId;
      }
    },
    tableRowClassName(row, rowIndex) {
      row = row.row;
      if (row.status === "0") {
        return "warning-row";
      } else {
        return "";
      }
    },
    deleteSelected() {
      let tableData = this.$refs.multipleTable.selection;
      let RoomIds = "";
      tableData.forEach((v, i) => {
        RoomIds = RoomIds + v.pkRoomId + ",";
      });
      if (!RoomIds) {
        this.$message.warning("请选择要删除的房间");
        return;
      }
      this.$confirm("确定删除所选的房间吗?", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteRoom(RoomIds).then((result) => {
          if (result.code === 10000) {
            this.$message.success(result.msg);
            this.loadDataProxy();
          }
        });
      });
    },
    toEdit(id) {
      // this.$router.push({ path: "/room/edit", query: { id: id } });
      this.$router.push("/room/edit?id=" + id);
    },
    resetDCForm() {
      this.$refs["deviceChangeForm"].resetFields();
      this.waterChecked = false;
      this.hotWaterChecked = false;
      this.electricChecked = false;
      this.gasChecked = false;
    }
  },

  mounted() {
    getOneAll(selectNameToId("area")).then((res) => {
      this.area = res.data;
    });
    getOneAll(selectNameToId("roomType")).then((res) => {
      this.roomType = res.data;
    });
    getOneAll(selectNameToId("roomState")).then((res) => {
      this.roomStateArray = res.data;
    });
    this.loadDataProxy();
    this.getBuilding();
    getAllByCoefficient().then((res) => {
      this.coefficient = res.data;
    });
  },
};
</script>
<style scoped>
>>> .room-dialog .el-dialog__header {
  height: 0;
  padding: 0;
}

>>> .room-dialog .div-table {
  height: auto;
}

>>> .room-dialog .list-radio {
  display: none;
}

>>> .coefficient .el-dialog {
  height: 78% !important;
}

>>> .room-dialog .el-dialog {
  height: 80%;
}

>>> .room-dialog .el-dialog__body {
  height: 98%;
  margin-top: 2%;
}

>>> .el-dialog__wrapper {
  z-index: 9999 !important;
  background-color: rgba(0, 0, 0, 0.4);
}

>>> .room-dialog .query-form {
  box-shadow: none;
}

>>> .room-dialog .container {
  background-color: white !important;
}

>>> .room-dialog .list-div > .el-row {
  background-color: rgb(235, 239, 250);
}

p {
  margin: 5px 0;
}

table {
  width: 100%;
  margin: 10px 0;
  border: 1px solid #e6e6e6;
}

table td,
table th {
  font-size: 0.2rem;
  font-weight: 500;
  border: 1px solid #e6e6e6;
  line-height: 0.35rem;
  padding-left: 0.1rem;
  min-width: 1rem;
}
</style>
